<html>
	<head>
		<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery
		
		var wheelModel;
		var previewState = new Array(0,0,0);
		
		google.setOnLoadCallback(function() {
			jQuery(function($) {
				$.getJSON("/wheel?wheelName=" + $('#wheelName').val(),
        			function(wheel){				
          				wheelModel = wheel;
          				
						refresh(0);
						refresh(1);
						refresh(2);
         			});
  				});
			});

		function fieldUp(index)
		{
			previewState[index]++;
		
			refresh(index);
		}

		function fieldDown(index)
		{
			previewState[index]--;
			
			refresh(index);
		}
		
		function refresh(index)
		{
			$("#fieldValue" + index).text(wheelModel[index]['values'][previewState[index]]);
			$("#fieldCode" + index).text(wheelModel[index]['codes'][previewState[index]]);		
		}
		
		</script>
	</head>
  <body>
        <h1>{{ greetings }}</h1>

    <form action="/" method="post">
		<span>Wheel Title:</span><input id="wheelName" name="wheelName" type="text" value={{ wheelName }}>
		<span>Wheel Code:</span>
		<div>
			<span>Name of first parameter:</span><input name="fieldLabel0" type="text">
			<span>Values for first parameter:</span>
			<textarea name="fieldValues0" rows="5" cols="30"></textarea>
		</div>
		
		<div>
			<span>Name of second parameter:</span><input name="fieldLabel1" type="text">		
			<span>Values for second parameter:</span>
			<textarea name="fieldValues1" rows="5" cols="30"></textarea>
		</div>
		
		<div>
			<span>Name of third parameter:</span><input name="fieldLabel2" type="text">
			<span>Values for third parameter:</span>
			<textarea name="fieldValues2" rows="5" cols="30"></textarea>
		</div>
		
		<div class="footer">
			<input type="submit" value="Save Wheel">
    	</div>
    </form>

	<div id="wheelPreview">
		<span>{{ firstParameterName }}</span>
		<span id="fieldValue0">hola</span>
		
		<span id="fieldCode0"></span>
		<a href="#" id="fieldUp" onclick="fieldUp(0);">Up</a>
		<a href="#" id="fieldDown" onclick="fieldDown(0);">Down</a>	
		
		<span id="fieldValue1">hola</span>
		<span id="fieldCode1"></span>
		<a href="#" id="fieldUp" onclick="fieldUp(1);">Up</a>
		<a href="#" id="fieldDown" onclick="fieldDown(1);">Down</a>
		
		<span id="fieldValue2">hola</span>	
		<span id="fieldCode3"></span>
		<a href="#" id="fieldUp" onclick="fieldUp(2);">Up</a>
		<a href="#" id="fieldDown" onclick="fieldDown(2);">Down</a>
	</div>
  </body>
</html>